<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      :header-cell-style="{ background: '#F5F5F5', color: '#000' }"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="name" label="角色名称" width="120" />
      <el-table-column label="操作" width="120">
        <el-button type="primary" size="small" @click="changePower">权限</el-button>
      </el-table-column>
    </el-table>
    <el-drawer
      title="权限管理"
      :visible.sync="powerDrawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all="true"
        :default-checked-keys="[5]"
        :props="defaultProps"
      >
      </el-tree>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Permission",
  data() {
    return {
      list: [
        {
          name: "管理员",
        },
        {
          name: "普通律师",
        },
        {
          name: "律师助理",
        },
        {
          name: "调查员",
        },
      ],
      total: 0,
      powerDrawer: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
      },
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.listLoading = false;
  },
  methods: {
    changePower() {
      this.powerDrawer = true;
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style scoped></style>
